<template>
  <el-container>
    <el-form ref="form" :model="work_detail" label-width="80px">
      <el-form-item label="流程名称">
        <el-input v-model="work_detail.name"></el-input>
      </el-form-item>

      <el-row>
<!--        状态-->
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select v-model="work_detail.status" placeholder="请选择状态">
              <el-option v-for="(vv,k) in work.work_state_list" :label="vv" :value="k" :key="k"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item>
        <el-row>
          <el-col :span="12"><el-button type="primary" @click="addNewWork">增加流程</el-button></el-col>
          <el-col :span="12"><el-button type="danger" @click="delOldWork" v-if="work_detail.workRow > 1">删除流程</el-button></el-col>
        </el-row>
      </el-form-item>


      <el-form-item>
        <el-row>
          <el-col :span="15">
            <el-timeline>
              <el-timeline-item
                v-for="(i,n) in work_detail.workRow"
                :key="n"
              >
                <el-row :gutter="10">
                  <el-col :span="24">
                    <el-select v-model="work_detail.workList[n].role" placeholder="请选择职位" filterable>
                      <el-option
                        v-for="(item,k) in position_all"
                        :key="k"
                        :label="item"
                        :value="k">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-timeline-item>
            </el-timeline>
          </el-col>


          <el-col :span="9" v-if="work_detail.workRow > 1">
            <el-timeline>
              <el-timeline-item
                v-for="(j,k) in work_detail.workRow"
                :key="k"
              >
                {{position_all[work_detail.workList[k].role]}}
              </el-timeline-item>
            </el-timeline>
          </el-col>

        </el-row>
      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" v-model="work_detail.desc"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editNewWork">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </el-container>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import {getUserList} from '@/apilist/public'
import {editWork} from '@/apilist/WorkFlow'
export default {
  name: "editWork",
  data(){
    return {
      positionList:[],
      status:'0',
    }
  },
  computed:{
    ...mapState('Setdata',["work_detail","position_list","position_all","work"]),
  },
  methods:{
    editNewWork(){
      editWork(this.work_detail).then(res => {
       this.$message({
           type:'success',
           message:res.msg,
       })
      })
    },

    addNewWork(){
       this.work_detail.workRow++;
       this.work_detail.workList.push({role:'',id: ''})
    },
    delOldWork(){
      this.work_detail.workRow--;
      this.work_detail.workList.pop();
    },
  },
  mounted(){

  },

}
</script>

<style scoped>

</style>
